/*
 * Copyright (c) 2021 minglong@iscas.ac.cn
 *
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * 1. Redistributions of source code must retain the above copyright notice, this list of
 *    conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above copyright notice, this list
 *    of conditions and the following disclaimer in the documentation and/or other materials
 *    provided with the distribution.
 *
 * 3. Neither the name of the copyright holder nor the names of its contributors may be used
 *    to endorse or promote products derived from this software without specific prior written
 *    permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
 * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
 * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
 * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 
<template>
<div>
  <a-row>
    <a-col :span="18" :offset="3" style="vertical-align:middle">
      <ACarousel>
        <div>
            <a href="#/document_root/src_views_documents_device-dev_quick-start_Readme-CN_md"><img style="margin: 0 auto;" src="/images/IMG_2334.png" /></a>
        </div>
        <div>
            <a href="#/interact/hdc_oh_session"><img style="margin: 0 auto;" src="/images/IMG_2333.jpg" /></a>
        </div>
        <div>
            <a href="#/interact/930_meetup"><img style="margin: 0 auto;" src="/images/IMG_2335.png" /></a>
        </div>
      </ACarousel>
    </a-col>
  </a-row>
      
  <a-row >
    <a-col :span="18" :offset="3" style="align:center">
      <Tabs default-active-key="1" :tab-position="tabPosition">
        <TabPane key="1" tab="快捷导航">
          <Card :boardered="false" style="min-height:500px;">
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <HomeFilled style="color:#1fdaca" />
                <span class="text-md mt-2" style="vertical-align:middle;"><router-link to="/about/about">关于我们 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <LoginOutlined style="color:#bf0c2c" />
                <span class="text-md mt-2"><router-link to="/document_root/src_views_documents_device-dev_quick-start_Readme-CN_md">快速入门 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <ReadFilled style="color:#00d8ff" />
                <span class="text-md mt-2"><router-link to="/documents/documents-overview">文档 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <SoundFilled style="color:#e18525" />
                <span class="text-md mt-2"><router-link to="/community/index">社区 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <TeamOutlined style="color:#4daf1bc9" />
                <span class="text-md mt-2"><router-link to="/SIG/index">SIG组 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <UserAddOutlined style="color:#3fb27f" />
                <span class="text-md mt-2"><router-link to="/members/index">OpenHarmony成员单位 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <ApiFilled style="color:#4daf1bc9" />
                <span class="text-md mt-2"><router-link to="/services/xts">兼容性测试 </router-link></span>
              </span>
            </CardGrid>
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:30%;font-size:20px;">
                <BorderOuterOutlined style="color:#3fb27f" />
                <span class="text-md mt-2"><router-link to="/supportDevices/devices">支持的开发板 </router-link></span>
              </span>
            </CardGrid>
          </Card>
        </TabPane>
        <TabPane key="3" tab="快速上手">
          <Card :boardered="false" style="min-height:500px;">
            <CardGrid style="width:25%;min-height:250px;">
              <span class="flex flex-col items-center" style="margin-top:5%;">
                <Timeline style="min-width:1000px;margin-left:750px;">
                  <TimelineItem color="green">
                    <h1>1. 安装依赖</h1>
                    <code>
                      <span style="color:orange">sudo apt-get</span> update <span style="color:aqua">&&</span> <span style="color:orange">sudo apt-get install</span> 
                      gnutls-bin gcc-arm-linux-gnueabi build-essential fakeroot dpkg-dev git-lfs build-essential gcc g++ make zlib* zip xsltproc  
                      x11proto-core-dev wget vim unzip u-boot-tools tzdata texinfo ssh scons python3-minimal python3-setuptools python3-pip python3-distutils python3-apt python3.8-distutils
                      npm nfs-kernel-server mtools mtd-utils m4 locales libxml2-utils libx11-dev libreadline-dev libgl1-mesa-dev libffi* libc6-dev-x32 libc6-dev-i386 lib32z-dev lib32ncurses5-dev
                      gperf gnupg git-lfs git-core g++-multilib g++ flex dosfstools default-jre default-jdk curl ccache build-essential bison binutils bc genext2fs ruby
                    </code>
                  </TimelineItem>
                  <TimelineItem color="green">
                    <h1>2. 安装工具：repo 和 hc-gen</h1>
                    <code style="text-align:left;">
                      <span style="color:orange">sudo curl</span> -s https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > /usr/local/bin/repo <br />
                      #默认使用root权限安装至/usr/local/bin,也可以装至其他路径
                    </code>
                  </TimelineItem>
                  <TimelineItem color="green">
                    <h1>3. 配置git相关参数</h1>
                    <code><span style="color:orange">git</span> config --global user.email <span style="color:green">"xxx@mail.com"</span></code> <br />
                    <code><span style="color:orange">git</span> config --global user.name <span style="color:green">"xxx"</span></code>
                  </TimelineItem>
                  <TimelineItem color="green">
                    <h1>4. 创建代码目录并拉取代码</h1>
                    <code><span style="color:orange">mkdir</span> OpenHarmony</code> <br />
                    <code><span style="color:orange">cd</span> OpenHarmony</code> <br />
                    <code><span style="color:orange">repo init</span> -u https://gitee.com/openharmony/manifest.git -b OpenHarmony-3.0-LTS --no-repo-verify</code> <br />
                    <code><span style="color:orange">repo sync</span> -c</code> <br />
                    <code><span style="color:orange">repo forall</span>  -c <span style="color:green">'git lfs pull'</span></code>
                  </TimelineItem>
                  <TimelineItem color="green">
                    <h1>5. 下载预编译工具</h1>
                    <code>./build/prebuilts_download.sh</code>
                  </TimelineItem>
                  <TimelineItem color="green">
                    <h1>6. 运行编译脚本（需自行调整参数）</h1>
                    <code>./build.sh</code>
                  </TimelineItem>
                </Timeline>
              </span>
            </CardGrid>
          </Card>
        </TabPane>
      </Tabs>
    </a-col>
  </a-row>

  
</div>
</template>

<script  lang="ts">
import { Row, Col, Carousel, Card, Steps, List, Menu, Tabs, Timeline } from 'ant-design-vue';
import {
  HomeFilled,
  TeamOutlined,
  LoginOutlined,
  ReadFilled,
  UserAddOutlined,
  SoundFilled,
  ApiFilled,
  PlayCircleFilled,
  DownCircleFilled,
  LeftCircleOutlined,
  RightCircleOutlined,
  BorderOuterOutlined
} from '@ant-design/icons-vue';
import { ref } from 'vue';
const tabPosition = ref('left');
const activeKey = ref('1');

export default {
  name: 'Home',
  components: {
    ARow: Row,
    ACol: Col,
    ACarousel: Carousel,
    CardGrid: Card.Grid,
    Card,
    HomeFilled,
    TeamOutlined,
    LoginOutlined,
    ReadFilled,
    UserAddOutlined,
    SoundFilled,
    ApiFilled,
    PlayCircleFilled,
    DownCircleFilled,
    List,
    ListItem: List.Item,
    ListItemMeta: List.Item.Meta,
    [Menu.name]: Menu,
    [Menu.SubMenu.name]: Menu.SubMenu,
    [Menu.Item.name]: Menu.Item,
    Tabs, 
    TabPane: Tabs.TabPane,
    LeftCircleOutlined,
    RightCircleOutlined,
    BorderOuterOutlined,
    [Steps.name]: Steps,
    [Steps.Step.name]: Steps.Step,
    [Card.name]: Card,
    Timeline: Timeline,
    TimelineItem: Timeline.Item
  },
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
      tabPosition,
      activeKey
     }
  },
  methods: { 
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    callback(val) {
      console.log(val);
    },
  }
}
</script>

<style scoped>
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 350px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
</style>
